<template>
  <div class="wrap">
    <el-steps :active="active" finish-status="success">
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>

    <el-tabs tab-position="left" :before-leave="tabsChange">
      <!-- tab-click 是点击tab栏触发的事件
        v-model="tabsValue" 绑定的是当前激活的tab的下标 -->
      <!-- 换成before-leave  这个属性本质是一个方法 他的特点是能帮我们阻止tab的切换 -->
      <el-tab-pane label="基本信息">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="ruleForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="goods_price">
            <el-input v-model="ruleForm.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input v-model="ruleForm.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="ruleForm.goods_number"></el-input>
          </el-form-item>
          <el-form-item>
            <el-cascader
              v-model="value"
              :options="cateList"
              :props="props"
            ></el-cascader>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品参数">商品参数</el-tab-pane>
      <el-tab-pane label="商品属性">商品属性</el-tab-pane>
      <el-tab-pane label="商品图片">
        <el-upload
          class="upload-demo"
          action="http://175.27.228.178:3434/api/private/v1/upload"
          list-type="picture"
          :on-success="postImg"
          :headers="headers"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
        <!-- 上传图片 -->
        <!-- actions 把图片上传到哪里
         list-type="picture" 展示为缩略图
          :headers="headers" 请求上传接口的时候配置的头信息
          on-success="postImg" 上传成功后会执行的函数 -->
      </el-tab-pane>
      <el-tab-pane label="商品内容"
        >商品内容

        <quill-editor
          v-model="richText"
          ref="myQuillEditor"
          :options="editorOption"
        >
          <!-- @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
          @ready="onEditorReady($event)" -->
          <!-- 富文本的这几个事件不需要可以不写 -->
        </quill-editor>
      </el-tab-pane>
      <el-tab-pane label="添加商品">
        <el-button type="primary" @click="addGood">添加商品</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      ruleForm: {
        goods_name: "",
        goods_price: "",
        goods_weight: "",
        goods_number: "",
      },
      rules: {
        goods_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
      },
      cateList: [],
      //分类列表
      props: {
        children: "children",
        label: "cat_name",
        value: "cat_id",
      },
      //自己定义要展示的字段
      value: [],
      //分类的value值
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      //设置上传图片的 头信息 携带token
      richText: "",
      //富文本的内容
      editorOption: {},
      //富文本额配置可以为空
    };
  },
  methods: {
    getCate() {
      this.$axios.get("/categories").then((res) => {
        console.log(res);
        this.cateList = res.data.data;
      });
    },

    tabsChange(newTab, oldTab) {
      console.log(newTab, oldTab);
      if (this.value.length == 0 && newTab != 0) {
        return false;
      } else {
        this.active = Number(newTab);
      }
      //如果 没有选分类 并且 下标不是0就不能继续点击切换
      // 否则还是要给 active赋值
    },
    //这个事件在点击tab时触发 但是 这个事件可以在某种情况下return false 就不能继续点击了 两个参数 第一个是新值 第二个是旧值（这里的新值旧值都是下标）

    // {
    //       ...this.ruleForm,
    //       goods_cat: this.value.join(","),
    //     }
    addGood() {
      this.$axios
        .post("goods", {
          ...this.ruleForm,
          goods_cat: this.value.join(","),
        })
        .then((res) => {
          console.log(res);
        });
    },
    //点击添加商品 把输入的商品的信息和分类 传给后台

    postImg(val) {
      console.log(val);
    },
    //图片上传成功的回调 上传成功打印图片路径
    onEditorBlur($event) {
      console.log($event);
    },
  },
  created() {
    this.getCate();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 80%;
  margin: 20px auto;
}
</style>
